<template>
  <div class="filter-form">
    <div class="el-form PMSearch">
      <div
        v-if="it.type == 'AsyncSelect'"
        :label="it.label"
        :prop="it.name"
        :required="it.required"
        :class="['el-form-item', it.itemClass]"
      >
        <label :for="it.name" class="el-form-item__label" :title="it.label">{{ it.label }}</label>
        <div class="el-form-item__content">
          <div @mousedown.stop>
            <AsyncSelect
              class="inputbox"
              :multiple="it.multiple"
              :collapse-tags="!it.collapseTags"
              :form-size="formSize"
              :disabled="it.disabled"
              :placeholder="it.placeholder"
              :url="it.url"
              :name="it.name"
              :custom="it.custom"
              :event-custom="it.eventCustom"
              :async-name="it.asyncName"
              :label-name="it.labelName"
              :value-name="it.valueName"
              :options="it.options || []"
              :parameter-obj="propsForm"
              :init-value="propsForm[it.name]"
              :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
              @onChange="onChange($event, it)"
              :style="`width: ${it.width ? it.width : rightWidth}`"
            />
          </div>
        </div>
      </div>
      <!-- 数字输入框 -->
      <div
        :label="it.label"
        :prop="it.name"
        v-else-if="it.type == 'number'"
        :rules="it.rules"
        :required="it.required"
        :class="['el-form-item', it.itemClass]"
      >
        <label :for="it.name" class="el-form-item__label">{{ it.label }}</label>
        <div class="el-form-item__content">
          <div @mousedown.stop>
            <el-input
              v-model="propsForm[it.name]"
              :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
              :style="`width: ${it.width ? it.width : rightWidth}`"
              size="small"
              :placeholder="it.placeholder"
              :class="it.class"
              :minlength="1"
              :maxlength="13"
              :disabled="it.disabled"
              clearable
              @input="
                (value) => {
                  propsForm[it.name] = value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1');
                }
              "
              @change="it.onChange && it.onChange()"
            ></el-input>
          </div>
        </div>
      </div>
      <!-- 金额输入框 -->
      <div
        :label="it.label"
        :prop="it.name"
        v-else-if="it.type == 'amountNumber'"
        :rules="it.rules"
        :required="it.required"
        :class="['el-form-item', it.itemClass]"
      >
        <label :for="it.name" class="el-form-item__label" :title="it.label">{{ it.label }}</label>
        <div class="el-form-item__content">
          <div @mousedown.stop>
            <el-input
              v-model="propsForm[it.name]"
              :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
              :style="`width: ${it.width ? it.width : rightWidth}`"
              size="small"
              :clearable="it.clearable === true ? true : false"
              :placeholder="it.placeholder"
              :class="it.class"
              :minlength="1"
              :maxlength="17"
              :disabled="it.disabled"
              @change="it.onChange && it.onChange(it.name, $event, propsForm)"
            ></el-input>
          </div>
        </div>
      </div>
      <div
        v-else-if="it.type == 'input'"
        :label="it.label"
        :prop="it.name"
        :required="it.required"
        :class="['el-form-item', it.itemClass]"
      >
        <label :for="it.name" class="el-form-item__label" :title="it.label">{{ it.label }}</label>
        <div class="el-form-item__content">
          <div @mousedown.stop>
            <el-input
              v-model="propsForm[it.name]"
              :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
              :class="it.class"
              :clearable="it.clearable === true ? true : false"
              :size="formSize"
              :disabled="it.disabled"
              :placeholder="it.placeholder"
              :style="`width: ${it.width ? it.width : rightWidth}`"
              @change="it.onChange && it.onChange()"
            ></el-input>
          </div>
        </div>
      </div>
      <div
        v-else-if="it.type == 'noinput'"
        :label="it.label"
        :prop="it.name"
        :required="it.required"
        :class="['el-form-item', it.itemClass]"
      >
        <label :for="it.name" class="el-form-item__label" :title="it.label">{{ it.label }}</label>
        <div class="el-form-item__content"></div>
      </div>
      <div
        v-else-if="it.type == 'select'"
        :label="it.label"
        :prop="it.name"
        :required="it.required"
        :class="['el-form-item', it.itemClass]"
      >
        <label :for="it.name" class="el-form-item__label" :title="it.label">{{ it.label }}</label>
        <div class="el-form-item__content">
          <div @mousedown.stop>
            <el-select
              :class="it.class"
              v-model="propsForm[it.name]"
              :multiple="it.multiple"
              :collapse-tags="it.collapseTags"
              filterable
              :clearable="it.clearable === false ? false : true"
              :size="formSize"
              :disabled="it.disabled"
              :placeholder="it.placeholder"
              :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
              :allow-create="it.allowCreate"
              @change="it.onChange && it.onChange()"
              @visible-change="(e) => it.onVisibleChange && it.onVisibleChange(e)"
              @remove-tag="it.onRemoveTag && it.onRemoveTag()"
              :style="`width: ${it.width ? it.width : rightWidth}`"
            >
              <el-option
                v-for="(item, index) in it.options"
                :key="index"
                :value="item.value"
                :label="item.label"
                :title="item.label"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div
        :label="it.label"
        :prop="it.name"
        v-else-if="it.type == 'date'"
        :required="it.required"
        :class="['el-form-item', it.itemClass]"
      >
        <label :for="it.name" class="el-form-item__label" :title="it.label">{{ it.label }}</label>
        <div class="el-form-item__content">
          <div @mousedown.stop>
            <el-date-picker
              :class="it.class"
              v-model="propsForm[it.name]"
              :type="it.type"
              value-format="yyyy-MM-dd"
              :size="formSize"
              :placeholder="it.placeholder"
              :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
              :disabled="it.disabled"
              :style="`width: ${it.width ? it.width : rightWidth}`"
              @change="it.onChange && it.onChange()"
            ></el-date-picker>
          </div>
        </div>
      </div>
      <div
        :label="it.label"
        :prop="it.name"
        v-else-if="it.type == 'daterange'"
        :required="it.required"
        :class="['el-form-item', it.itemClass]"
      >
        <label :for="it.name" class="el-form-item__label">{{ it.label }}</label>
        <div class="el-form-item__content">
          <div @mousedown.stop>
            <el-date-picker
              :class="it.class"
              :style="`width: ${it.width ? it.width : rightWidth}`"
              v-model="propsForm[it.name]"
              :type="it.type"
              value-format="yyyy-MM-dd"
              :size="formSize"
              :placeholder="it.placeholder"
              :disabled="it.disabled"
              range-separator="~"
              :start-placeholder="$t('开始日期')"
              :end-placeholder="$t('结束日期')"
            ></el-date-picker>
          </div>
        </div>
      </div>
      <div
        :label="it.label"
        :prop="it.name"
        v-else-if="it.type == 'monthrange'"
        :required="it.required"
        :class="['el-form-item', it.itemClass]"
      >
        <label :for="it.name" class="el-form-item__label">{{ it.label }}</label>
        <div class="el-form-item__content">
          <div @mousedown.stop>
            <el-date-picker
              :class="it.class"
              :style="`width: ${it.width ? it.width : rightWidth}`"
              v-model="propsForm[it.name]"
              :type="it.type"
              value-format="yyyy-MM-dd"
              :size="formSize"
              :placeholder="it.placeholder"
              :disabled="it.disabled"
              range-separator="~"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
            ></el-date-picker>
          </div>
        </div>
      </div>
      <div
        :label="it.label"
        :prop="it.name"
        v-else-if="it.type == 'year'"
        :required="it.required"
        :class="['el-form-item', it.itemClass]"
      >
        <label :for="it.name" class="el-form-item__label">{{ it.label }}</label>
        <div class="el-form-item__content">
          <div @mousedown.stop>
            <el-date-picker
              :class="it.class"
              v-model="propsForm[it.name]"
              :type="it.type"
              :size="formSize"
              :picker-options="it.pickerOptions"
              :placeholder="it.placeholder"
              :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
              :disabled="it.disabled"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div
        :label="it.label"
        :prop="it.name"
        v-else-if="it.type == 'month'"
        :required="it.required"
        :class="['el-form-item', it.itemClass]"
      >
        <label :for="it.name" class="el-form-item__label">{{ it.label }}</label>
        <div class="el-form-item__content">
          <div @mousedown.stop>
            <el-date-picker
              :class="it.class"
              v-model="propsForm[it.name]"
              :type="it.type"
              :size="formSize"
              :picker-options="it.pickerOptions"
              :placeholder="it.placeholder"
              :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
              :disabled="it.disabled"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div
        :label="it.label"
        :prop="it.name"
        v-else-if="it.type == 'percentInput'"
        :required="it.required"
        :class="['el-form-item', it.itemClass]"
      >
        <label :for="it.name" class="el-form-item__label">{{ it.label }}</label>
        <div class="el-form-item__content">
          <div @mousedown.stop>
            <el-input
              v-model="propsForm[it.name]"
              :style="`width: ${it.width ? it.width : rightWidth}`"
              size="small"
              :placeholder="it.placeholder"
              :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
              :class="it.class"
              :minlength="1"
              :maxlength="13"
              :disabled="it.disabled"
              oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')"
              @change="it.onChange && it.onChange()"
            >
              <template slot="append">{{ it.right }}</template>
            </el-input>
          </div>
        </div>
      </div>
      <div
        :label="it.label"
        :prop="it.name"
        v-else-if="it.type == 'number1'"
        :required="it.required"
        :class="['el-form-item', it.itemClass]"
      >
        <label :for="it.name" class="el-form-item__label">{{ it.label }}</label>
        <div class="el-form-item__content">
          <div @mousedown.stop>
            <el-input-number
              v-model="propsForm[it.name]"
              :style="`width: ${it.width ? it.width : rightWidth};text-align: left`"
              size="small"
              :class="it.class"
              @change="it.onChange && it.onChange()"
              :label="it.label"
              :controls="it.controls ? it.controls : false"
            ></el-input-number>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

import AsyncSelect from '@/components/AsyncSelect';

@Component({
  components: {
    AsyncSelect: AsyncSelect,
  },
})
export default class FormList extends Vue {
  @Prop({ default: () => {} }) it: any;
  @Prop({ default: () => {} }) propsForm: any;
  @Prop({ default: 'small' }) formSize: any;
  @Prop({ default: '' }) tableType: any;
  @Prop({ default: true }) searchButton: any;
  @Prop({ type: String, required: false, default: '225px' }) rightWidth: any;
  @Prop({
    type: Object,
    required: false,
    default: () => {},
  })
  rules;

  // 模糊查询组件选择触发
  onChange(res, item) {
    const { data, value, valueName, name, eventCustom } = res;
    this.propsForm[name] = value;
    item.onChange && item.onChange(res);
  }
}
</script>
<style lang="less">
@import './index.less';
::v-deep.line-feed .el-form-item__label {
  white-space: pre-line !important;
  height: 32px !important;
  line-height: 16px !important;
}
</style>
